<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>成绩管理系统</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background: #f0f2f5;
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            height: 100vh;
            overflow: hidden;
        }
        .navbar {
            width: 97%;
            background:linear-gradient(to right, #007bff, #290b65);
            padding: 20px;
            color: white;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap; /* 允许内容换行 */
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .navbar h1 {
            margin: 0;
            flex: 1; /* 确保标题占据一部分空间 */
        }
        .navbar div {
            display: flex;
            gap: 20px; /* 增加元素之间的间距 */
        }
        .navbar a {
            color: white;
            text-decoration: none;
            display: flex; /* 让链接内的内容成为 flex 容器 */
            align-items: center; /* 垂直居中 */
        }
        .navbar img {
            height: 40px; /* 设置图片高度，根据需要调整 */
            margin-right: 10px; /* 图片和标题之间的间距 */
        }
        .main {
            display: flex;
            flex: 1;
            height: calc(100vh - 60px); /* 调整高度以适应导航栏 */
        }
        .sidebar {
            width: 220px;
            background: #ffffff;
            border-right: 1px solid #ddd;
            display: flex;
            flex-direction: column;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .sidebar .btn {
            padding: 15px 20px;
            margin-bottom: 10px;
            background: linear-gradient(to right, #007bff, #290b65);
            color: white;
            text-decoration: none;
            border-radius: 5px;
            text-align: center;
            transition: background 0.3s;
        }
        .sidebar .btn:hover {
            background: linear-gradient(to right, #007bff, #290b65);
        }
        .submenu .btn {
            padding: 10px 15px;
            margin-bottom: 5px;
            background:linear-gradient(to right, #007bff, #290b65);
            color: white;
            text-decoration: none;
            border-radius: 5px;
            text-align: center;
            transition: background 0.3s;
            font-size: 0.9em; /* 字体大小减少 */
        }
        .submenu .btn:hover {
            background: linear-gradient(to right, #007bff, #290b65);
        }
        .submenu .btn.active {
            background: linear-gradient(to right, #f67905, #dfd803);/* 橙色 */
        }
        .submenu {
            display: none;
            flex-direction: column;
            padding-left: 15px; /* 左侧缩进 */
        }
        .content {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
            position: relative; /* 使得轮播图相对定位 */
        }
        .content iframe {
            width: 100%;
            height: 100%;
            border: none;
        }
        .carousel {
            width: 100%;
            height: 400px; /* 轮播图高度 */
            position: relative;
            overflow: hidden;
            margin-bottom: 20px;
        }
        .carousel img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            transition: opacity 1s ease-in-out;
        }
        .carousel img.active {
            opacity: 1;
        }
        .welcome-text {
            text-align: center;
            font-size: 50px;
            color: #333;
            margin-bottom: 20px;
        }
    </style>
    <script>
        function toggleSubmenu(id) {
            var submenu = document.getElementById(id);
            var subButtons = submenu.querySelectorAll('.btn');

            if (submenu.style.display === "none" || submenu.style.display === "") {
                submenu.style.display = "flex";
                subButtons.forEach(subButton => {
                    subButton.classList.add('active');
                });
            } else {
                submenu.style.display = "none";
                subButtons.forEach(subButton => {
                    subButton.classList.remove('active');
                });
            }
        }
        function startCarousel() {
            let currentIndex = 0;
            const images = document.querySelectorAll('.carousel img');
            const totalImages = images.length;

            function showNextImage() {
                images[currentIndex].classList.remove('active');
                currentIndex = (currentIndex + 1) % totalImages;
                images[currentIndex].classList.add('active');
            }

            setInterval(showNextImage, 3000); // 每3秒切换一张图片
        }

        window.onload = function() {
            startCarousel();
        };
    </script>
</head>
<body>
    <div class="navbar">
        <a href="./HOME.html">
            <span>
                <img src="./logo1.jpg" alt="Logo">
            </span>
            <h1>成绩管理系统</h1>
        </a>
        <div>
            <a href="./about me.html">关于我们</a>
            <a href="index.html">注销</a>
        </div>
    </div>
    <div class="main">
        <div class="sidebar">
            <a href="javascript:void(0)" class="btn" onclick="toggleSubmenu('studentSubmenu')">学生</a>
            <div id="studentSubmenu" class="submenu">
                <a href="lookscore.html" class="btn" target="contentFrame">查看成绩</a>
            </div>
            <a href="javascript:void(0)" class="btn" onclick="toggleSubmenu('teacherSubmenu')">老师</a>
            <div id="teacherSubmenu" class="submenu">
                <a href="lookscore.html" class="btn" target="contentFrame">查看成绩</a>
                <a href="insertscore.html" class="btn" target="contentFrame">录入成绩</a>
                <a href="updatescore.html" class="btn" target="contentFrame">修改成绩</a>
                <a href="deletescore.html" class="btn" target="contentFrame">删除成绩</a>
            </div>
            <a href="javascript:void(0)" class="btn" onclick="toggleSubmenu('adminSubmenu')">管理员</a>
            <div id="adminSubmenu" class="submenu">
                <a href="lookteacher.html" class="btn" target="contentFrame">查看老师</a>
                <a href="lookstudent.html" class="btn" target="contentFrame">查看学生</a>
                <a href="insertteacher.html" class="btn" target="contentFrame">录入老师</a>
                <a href="insertstudent.html" class="btn" target="contentFrame">录入学生</a>
                <a href="deleteteacher.html" class="btn" target="contentFrame">炒鱿鱼老师</a>
                <a href="deletestudent.html" class="btn" target="contentFrame">劝退学生</a>
                <a href="updateteacher.html" class="btn" target="contentFrame">修改老师信息</a>
                <a href="updatestudent.html" class="btn" target="contentFrame">修改学生信息</a>
            </div>
        </div>
        <div class="content">
            <div class="carousel">
                <img src="./轮播图1.jpg" alt="Image 1" class="active">
                <img src="./轮播图2.jpg" alt="Image 2">
                <img src="./轮播图3.jpg" alt="Image 3">
            </div>
            <div class="welcome-text">
                欢迎登录成绩管理系统！
            </div>
            <iframe name="contentFrame"></iframe>
        </div>
    </div>
</body>
</html>
